import React from 'react';
import './04-父传子练习.css';
// 导入子组件
import { ChildItem } from './04-父传子练习子组件';

export class App extends React.Component {
  constructor() {
    super();
    // 组件状态（数据）
    this.state = {
      list: [
        {
          id: 1,
          name: '超级好吃的棒棒糖',
          price: 18.8,
          info: '开业大酬宾，全场8折',
        },
        {
          id: 2,
          name: '超级好吃的大鸡腿',
          price: 34.2,
          info: '开业大酬宾，全场8折',
        },
        {
          id: 3,
          name: '超级无敌的冰激凌',
          price: 14.2,
          info: '开业大酬宾，全场8折',
        },
      ],
    };
  }

  // 定义砍价函数
  kan = (id, step) => {
    console.log('子组件传递的数据', id, step);
    // 修改对应商品数据
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        // 改价格
        return { ...item, price: parseFloat(item.price - step).toFixed(2) };
      } else {
        return item;
      }
    });
    // 设置页面数据
    this.setState({
      list: newList,
    });
  };

  render() {
    return (
      // 父组件
      <div className="parent">
        <h1>父组件</h1>
        {/* 把下面UI抽离为子组件 */}
        {this.state.list.map((item) => {
          return <ChildItem {...item} kan={this.kan} key={item.id} />;
        })}
      </div>
    );
  }
}

export default App;
